<template>
  <div>
  <el-table
      :data="tableData"
      height="689px"
      v-loading="loading"
      style="width: 100%"
      :header-cell-style="{background:'#ffd04b',color:'#606266'}"
      >
    <el-table-column
      type="selection"
      width="50px"
      align="center"
      ></el-table-column>
    <el-table-column
        align="center"
        prop="id"
        label="编号"
        width="180">
    </el-table-column>
    <el-table-column
        align="center"
        prop="name"
        label="名称"
        width="180">
    </el-table-column>
    <el-table-column
        align="center"
        prop="price"
        label="价格(元)"
        width="180">
    </el-table-column>
    <el-table-column
        align="center"
        prop="nums"
        label="库存">
      </el-table-column>
    <el-table-column
        align="center"
        prop="icon"
        label="参考图">
      <template slot-scope="scope">
        <img :src="scope.row.icon" style="height: 40px"/>
      </template>
    </el-table-column>
    /el-table-column>
    <el-table-column
        align="center"
        label="存量变化"
        width="80px">
      <template slot-scope="scope">
        <el-button type="warning" size="mini" @click="dialogFormVisible = true">更新</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-dialog title=""  :visible.sync="dialogFormVisible" center>
      <div style="margin-left: 140px">
        <el-form ref="form" :model="form" label-width="80px" style="width: 380px;height: 150px">
          <h2 style="color: #ffd04b;padding-left: 160px">存量更新</h2><br>
          <el-form-item label="酒水编号:">
            <el-input v-model="form.id" ></el-input>
          </el-form-item>
          <el-form-item label="数量:">
            <el-input v-model.number="form.nums" ></el-input>
            </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" >
        <el-button type="" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="warning" @click="onsubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "drinks",
  methods: {
    //更新库存
  onsubmit(){
    console.log(this.form)
    axios.put('http://120.24.48.65:8282/drink/update',{
      id:this.form.id,
      nums:this.form.nums
    }).then(response =>{
      console.log(response.data)
      if (response.data){
        this.$alert('更新库存成功','更新数据',{
          callback:action => {
            location.reload()
          }
        });
        this.dialogFormVisible = false
      }
    })
  }
  },
  created() {
    axios.get('http://120.24.48.65:8282/drink/list').then(response=>{
      this.tableData=response.data
      console.log(this.tableData)
      if(response.data){
        setTimeout(() => {
          //代码
          this.loading = false
        }, 500);
      }
    })
  },
  data() {
    return {
      form:[
        {
          id:1,
          nums:2,
        }
      ],
      tableData: [
      ],
      loading:true,
      dialogFormVisible:false,
    }
  }
}
</script>
<style >

</style>


